﻿@{
    ViewBag.Title = "Edit Menu Item";
}

@section scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
    <script src="~/js/admin/menus/item.js"></script> 
}

<div style="display: none;" data-bind="visible: true">

    <div class="page-header">
        <h1>Menu Item</h1>
    </div>

    <form id="editMenuItemForm" name="editMenuItemForm" class="form-horizontal" role="form">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#Details" data-toggle="tab">Details</a>
            </li>
            <li>
                <a href="#Permissions" data-toggle="tab">Permissions</a>
            </li>
        </ul>

        <div class="tab-content" style="margin:25px 0">
            <div id="Details" class="tab-pane active">

                <div class="form-group has-feedback">
                    <label for="itemTypes" class="col-md-2 control-label">Type</label>
                    <div class="col-md-4">
                        <select id="itemTypes" name="itemTypes" data-bind="options: itemTypes, optionsText: 'name', optionsValue: 'id', value: menuItemType" class="form-control"></select>
                    </div>
                </div>

                <div class="form-group has-feedback" data-bind="visible: menuItemType() == 1">
                    <label for="pages" class="col-md-2 control-label">Page</label>
                    <div class="col-md-4">
                        <select id="pages" name="pages" data-bind="options: pages, optionsText: 'name', optionsValue: 'id', value: pageId" class="form-control"></select>
                    </div>
                </div>

                <div class="form-group has-feedback" data-bind="visible: menuItemType() == 2">
                    <label for="link" class="col-md-2 control-label">Link</label>
                    <div class="col-md-4">
                        <input id="link" name="link" type="text" data-bind="value: link" class="form-control" placeholder="Enter Link">
                        <i class="form-control-feedback glyphicon"></i>
                    </div>
                    <div class="col-md-6 help-block">
                        <label id="link-error" for="link" class="text-danger" style="display: none;"></label>
                    </div>
                </div>

                <!-- ko ifnot: menuItemLocalisations().length > 0 -->
                <div data-bind="template: { name: 'menuItemDefaultLocalisation-template' }"></div>
                <!-- /ko -->
                <!-- ko if: menuItemLocalisations().length > 0 -->
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#Default" data-toggle="tab">Default</a>
                    </li>
                    <!-- ko foreach: menuItemLocalisations -->
                    <li>
                        <a data-bind="text: tabLanguageName, attr: { href: '#' + languageName() }" data-toggle="tab"></a>
                    </li>
                    <!-- /ko -->
                </ul>
                <div class="tab-content" style="margin: 25px 0 35px;">
                    <div id="Default" data-bind="template: { name: 'menuItemDefaultLocalisation-template' }" class="tab-pane active"></div>
                    <!-- ko foreach: menuItemLocalisations -->
                    <div data-bind="attr: { id: languageName }, template: { name: 'menuItemLocalisation-template' }" class="tab-pane"></div>
                    <!-- /ko -->
                </div>
                <!-- /ko -->
                <span style="font-style: italic;" data-bind="visible: menuItemLocalisationsNotActive().length > 0">* Language Not Active</span>
            </div>
            <div id="Permissions" class="tab-pane">
                <div class="form-group has-feedback">
                    <div class="col-md-12">
                        <table class="table table-bordered" style="width: auto;" data-bind="visible: menuItemType() != 1">
                            <thead>
                            <tr>
                                <th>Role</th>
                                <th class="text-center">View</th>
                            </tr>
                            </thead>
                            <tbody data-bind="foreach: menuItemPermissions()">
                            <tr>
                                <td data-bind="text: roleName"></td>
                                <td class="text-center">
                                    <input type="hidden" data-bind="value: roleId"/>
                                    <input type="checkbox" data-bind="checked: selected, disable: disabled" />
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div data-bind="visible: menuItemType() == 1">
                            Permissions will be inhrited from the selected page.
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-12">
                <input id="save" type="submit" class="btn btn-primary" value="Save" title="Save" />
                <button id="delete" data-bind="click: confirmMenuItemToDelete, visible: deletable" class="btn btn-danger" title="Delete" data-toggle="modal" data-target="#confirm-delete">Delete</button>
                <button id="cancel" data-bind="click: cancel" class="btn btn-default" title="Cancel">Cancel</button>
            </div>
        </div>
    </form>

    <script id="menuItemDefaultLocalisation-template" type="text/html">
        <div class="form-group has-feedback">
            <label for="text" class="col-md-2 control-label">Text</label>
            <div class="col-md-4">
                <input id="text" name="text" type="text" data-bind="value: text" class="form-control" placeholder="Enter Text">
                <i class="form-control-feedback glyphicon"></i>
            </div>
            <div class="col-md-6 help-block">
                <label id="text-error" for="text" class="text-danger" style="display: none;"></label>
            </div>
        </div>
        <div class="form-group has-feedback">
            <label for="title" class="col-md-2 control-label">Title</label>
            <div class="col-md-4">
                <input id="title" name="title" type="text" data-bind="value: title" class="form-control" placeholder="Enter Title">
                <i class="form-control-feedback glyphicon"></i>
            </div>
            <div class="col-md-6 help-block">
                <label id="title-error" for="title" class="text-danger" style="display: none;"></label>
            </div>
        </div>
    </script>

    <script id="menuItemLocalisation-template" type="text/html">
        <div class="form-group has-feedback">
            <label data-bind="attr: { for: 'text-' + languageName() }" class="col-md-2 control-label">Text</label>
            <div class="col-md-4">
                <input data-bind="attr: { id: 'text-' + languageName(), name: 'text-' + languageName() }, value: text" type="text" class="form-control validate-localisation-text" placeholder="Enter Text">
                <i class="form-control-feedback glyphicon"></i>
            </div>
            <div class="col-md-6 help-block">
                <label data-bind="attr: { id: 'text-error-' + languageName(), for: 'text-' + languageName() }" class="text-danger" style="display: none;"></label>
            </div>
        </div>
        <div class="form-group has-feedback">
            <label data-bind="attr: { for: 'title-' + languageName() }" class="col-md-2 control-label">Title</label>
            <div class="col-md-4">
                <input data-bind="attr: { id: 'title-' + languageName(), name: 'title-' + languageName() }, value: title" type="text" class="form-control validate-localisation-title" placeholder="Enter Title">
                <i class="form-control-feedback glyphicon"></i>
            </div>
            <div class="col-md-6 help-block">
                <label data-bind="attr: { id: 'title-error-' + languageName(), for: 'title-' + languageName() }" class="text-danger" style="display: none;"></label>
            </div>
        </div>
    </script>

    <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="deleteModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="deleteModal">Confirm Delete</h4>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this menu item and all descendants?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a class="btn btn-danger btn-ok" data-dismiss="modal" data-bind="click: deleteMenuItem">Delete</a>
                </div>
            </div>
        </div>
    </div>

</div>
